<template>
    <div class="apply-form">
        <div class="form">
            <mt-cell title="微信号">
                <mt-input placeholder="请输入微信号" v-model="form.wxid"></mt-input>
            </mt-cell>
            <mt-cell title="真实姓名">
                <mt-input placeholder="请输入用户名" v-model="form.name"></mt-input>
            </mt-cell>
            <mt-cell title="手机号">
                <mt-input type="tel" :maxlength="11" placeholder="请输入手机号" v-model="form.phoneNo"></mt-input>
            </mt-cell>
            <mt-cell title="微信群人数">
                <mt-input type="number" placeholder="请输入微信群人数" v-model="form.num"></mt-input>
            </mt-cell>
            <mt-cell title="城市">
                <mt-input placeholder="点击选择城市" :value="province ? (province+'-'+form.city) : ''" @click="popupSelection"></mt-input>
            </mt-cell>
            <mt-cell title="" v-if="memberLeast!==''">
                <div class="manager-last pl15">您所在的区域还剩下<span class="count"> {{ memberLeast }} </span>个名额</div>
            </mt-cell>
        </div>
        <div class="text-center">
            <mt-button type="primary" class="apply-button" @click="submit">申&nbsp;请</mt-button>
        </div>
        <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom" :closeOnClickModal="false">
            <mt-picker :slots="addressSlots" @change="onValuesChange" showToolbar>
                <div class="p10">
                    <mt-button size="small" @click="popupVisible = false">取消</mt-button>
                    <mt-button class="fr" size="small" type="primary" @click="selectedCity">确定</mt-button>
                </div>
            </mt-picker>
        </mt-popup>
    </div>
</template>

<script>
    import citys from '@/assets/citys'
    import { register, getCountByCity } from '@/api'
    const firstLineCitys = ['北京', '上海', '广州', '深圳'];
    const secondLineCitys = ['成都', '杭州', '重庆', '武汉', '苏州', '西安', '天津', '南京', '郑州', '长沙', '沈阳', '青岛', '宁波', '东莞', '无锡', '昆明', '大连', '厦门', '合肥', '佛山', '福州', '哈尔滨', '济南', '温州', '长春', '石家庄', '常州', '泉州', '南宁', '贵阳', '南昌', '南通', '金华', '徐州', '太原', '嘉兴', '烟台', '惠州', '保定', '台州', '中山', '绍兴', '潍坊', '兰州', '乌鲁木齐'];
    export default {
        data() {
            return {
                popupVisible: false,
                form: {
                    wxid: '',
                    name: '',
                    phoneNo: '',
                    num: '',
                    city: ''
                },
                memberLeast: '',
                changed: false,
                newProvince: '北京',
                province: '',
                newCity: '',
                addressSlots: [
                {
                    flex: 1,
                    values: Object.keys(citys),
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                }, {
                    flex: 1,
                    values: ['北京'],
                    textAlign: 'center'
                }],
            }
        },
        methods: {
            popupSelection(input) {
                input.blur()
                this.changed = false
                this.popupVisible = true
            },
            onValuesChange(picker, values) {
                this.changed = true
                picker.setSlotValues(1, citys[values[0]]);
                this.newProvince = values[0]
                this.newCity = values[1]
            },
            selectedCity() {
                this.popupVisible = false
                if (this.changed) {
                    this.form.city = this.newCity
                    this.province = this.newProvince
                } else {
                    this.province = '北京'
                    this.form.city = '北京'
                }
                let limit = firstLineCitys.includes(this.form.city) ? 50 : secondLineCitys.includes(this.form.city) ? 10 : 5
                getCountByCity({ city: this.form.city }).then(res => {
                    this.memberLeast = limit - parseInt(res.data.result)
                })
            },
            submit() {
                if (Object.values(this.form).includes('')) {
                    this.$toast({
                        message: '请填写完整信息',
                        duration: 2000
                    })
                    return false
                }
                if(!(/^1\d{10}$/.test(this.form.phoneNo))){ 
                    this.$toast({
                        message: '手机号格式有误',
                        duration: 2000
                    })
                    return false; 
                } 
                if(this.memberLeast < 1) {
                    this.$toast({
                        message: '抱歉，该城市名额已满',
                        // position: 'top',
                        duration: 2000
                    })
                    return false
                }
                register(this.form).then(res => {
                    this.$router.push('/applied/1')
                })
            }
        },
    }
</script>

<style scoped lang="scss">
    .apply-form {
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 0;
        /deep/ {
            .mint-cell:first-child .mint-cell-wrapper {
                background-origin: content-box;
            }

            .form .mint-cell:last-child {
                background-image: none;

                .mint-cell-wrapper {
                    background-image: none;
                }

                .manager-last {
                    font-size: 13px;

                    .count {
                        color: var(--primaryColor);
                    }
                }
            }

            .mint-cell-wrapper {
                background-position: bottom left;
            }

            .mint-cell-wrapper {
                .mint-cell-title {
                    flex: inherit;
                    width: 80px;
                }

                .mint-cell-value {
                    flex: 1;
                    -webkit-box-flex: 1;
                }
            }

            .picker-toolbar {
                height: auto;
            }

            .apply-button {
                margin-top: 10px;
                display: inline-block;
                width: 50%;
                height: 32px;
            }
        }
    }
</style>